<template>
  <ul class='join'>
    <li> 
      <p class="title">
        <img class="fl" :src="imgs.join" alt="">
        <span>附近的团</span>
      </p>
    </li>
    <li class="group" v-for="(item,index) in getFroupData">
      <span>{{item.place}}</span>
      <span>{{item.name | formatName}}</span>
      <span>{{item.phone | formatPhone}}</span>
      <span><span class="color-gold">{{item.people}}</span>/{{item.allPeople}}</span>
      <span class="btn" @click="join(item)">参团</span>
    </li>
    <p v-show="getFroupData.length==0" class="no-data">暂时没有团。<span class="color-gold open-new" @click.stop="open">车哥哥来开团</span></p>
  </ul>
</template>
<script>
export default {
  props:["data"],
  components: {},
  name: "",
  data() {
    return {
      imgs:{
        join:require("../../../../assets/img/hpmepage/regiment/join.png")
      },
      groupHeadData:["地区","姓名","电话","人数"],
      groupData:[
        {
          id:1,
          place:"青山区",
          name:"张子龙",
          phone:"12345678912",
          people:2,
          allPeople:3
        },{
          id:2,
          place:"青山区",
          name:"张子龙",
          phone:"12345678912",
          people:2,
          allPeople:3
        },{
          id:3,
          place:"青山区",
          name:"张子龙",
          phone:"12345678912",
          people:2,
          allPeople:3
        }
      ]
    };
  },
  computed:{
    getFroupData(){
      return this.data||[]
    }
  },
  filters:{
    formatName(val){
      return val[0]+"**"
    },
    formatPhone(val){
      return val.slice(0,3)+"****"+val.slice(7)
    }
  },
  methods: {
    // 车哥哥来开团
    open(){
      this.$emit("openNew")
    },
    // 参团
    join(item){
      // console.log("click----参团成功")
      var params={
        userId:sessionStorage.getItem("userId"),
        teamId:item.id,
        teamMax:item.allPeople,
        teamNum:item.people
      }
      var that=this
      _g.apiPost("collage/joinTeam.do",params).then(res=>{
        if(res.status==0){
          item.people++
          this.$store.state.dialogs.join.content="请在我的订单中查看"
          this.$store.state.dialogs.join.OK=function(){
            that.$router.push("/member/myorder")
          }
        }else{
          this.$store.state.dialogs.join.content="error"
        }
        this.$store.state.dialogs.join.show=true
        this.$store.state.dialogs.join.title=res.msg
      })
      
    },
  },
  created() {
  }
};
</script>
<style lang="scss" scoped>
.join {
  margin: 0 15px;
  font-size: 14px;
  color: #999;


  .title{
    font-size: 16px;
    color: #333;
    padding: 10px 0;

    img{
      width: 20px;
    }
  }

  li{
    border-bottom: 1px solid #f2f2f2;
  }
  .group{
    height: 40px;
    line-height: 40px;
    display: flex;

    >span{
      flex-grow: 1;
      min-width: 50px;
      text-align: center;
    }
    .btn{
      background: linear-gradient(left bottom,#FF6613,#FFA200);
      background: -webkit-gradient(linear, left bottom, right top, from(#FF6613), to(#FFA200));
      color: #fff;
      line-height: 25px;
      height: 25px;
      font-size: 12px;
      margin-right: 5px;
      margin-top: 8px;
      border-radius: 2px;
    }
    .btn:active{
      opacity: .6;
    }
  }
  .open-new{
    text-decoration: underline;
  }
  .open-new:active{
    opacity: .6;
  }

}
</style>